<template>
  <div>
    <el-input  v-model="input" placeholder="地区编号或名称" size="normal" clearable  style="width: 200px;"></el-input>
<el-button type="primary" size="default" @click="search">查询</el-button>
<el-button type="primary" size="default" @click="dialogFormVisible = true">新增商品种类</el-button>
    <el-table :data="tableData" height="600" style="width: 100%">
    <el-table-column prop="id" label="商品种类编号" width="150" />
    <el-table-column prop="name" label="商品种类名称" width="150" />
    <el-table-column  label="操作 " width="150" >
      <template #default="scope">
        <!-- <el-button link type="primary" size="small" @click="remove(scope.$index)" >删除</el-button> -->
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" title="商品信息">
    <el-form :model="form">
      <el-form-item label="商品种类" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="add">
         确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="editformVisible" title="商品信息">
    <el-form :model="form">
      <el-form-item label="商品种类" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editformVisible = false">取消</el-button>
        <el-button type="primary" @click="Editconfirm">
         确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script>
 import axios from '@/utils/request';
export default {
name:'ItemKind',
data() {
  return {
    input:'',
    dialogFormVisible:false,
    editformVisible:false,
    tableData:[
      {id:'2',
       name:'鱼'
      },
      {id:'1',
       name:'鱼'
      },
      {id:'1',
       name:'鱼'
      },
      {id:'1',
       name:'鱼'
      },
      {id:'1',
       name:'鱼'
      },
    ],
    form:{
      name:'',
      id:''
    }
  }
},
methods:{
    handleEdit(index){
      this.form =this.tableData[index]
      //把当前编辑的行号赋值给全局保存的行号
      this.editformVisible = true
  },
  Editconfirm(){
    const params={
      id:this.form.id,
    }
    console.log(params);
    axios.post('/ser_dir/inupdatecate',JSON.stringify(params))
    this.form={}
    this.editformVisible=false
  },
  getall(){
    axios.get('/select/selallcategory').then(res=>{
      this.tableData=res.data
      console.log(this.tableData);
      // const a=JSON.parse(JSON.stringify(this.tableData))
      // console.log(a);
      // console.log(res.data);
    })
  },
  add(){
    this.tableData.push(this.form)
const parmas={
  id:this.form.id,
  name:this.form.name
}
    axios.post('/ser_dir/inscate',JSON.stringify(parmas)).then(res=>{
   console.log(res);
    })
    this.form={}
 this.dialogFormVisible=false
  },
  search(){
  this.tableData = this.tableData.filter(v =>(v.id.includes(this.input))||(v.name.includes(this.input)))
  },
},
mounted(){
  this.getall()
},
}
</script>

<style>

</style>